<template>
  <div class="home">
    <!-- <p>{{ number }}</p>
    <p>{{ obj.name.age }}</p> -->
    <p>{{num}}</p>
    <!-- <button @click="reduce">++</button> -->

    <button @click="jump">按钮</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref, reactive,toRefs } from "vue";
import  { useRouter } from 'vue-router';
export default {
  name: "Home",
  components: {},
  // props: {
  //   num: {
  //     type: Number,
  //     default: 3,
  //   },
  // },
  // data(){
  //   return{
  //     number:30
  //   }
  // },
  setup(props, context) {
    // create,beforeCreate
    // console.log(props.num);
    // console.log(context);
    // context.emit // 子传父
    // this.number

    // ref 声明基本数据类型

    // const number = ref(0);

    // reactive 使用 来声明复杂的对象或者数组
    // const obj = reactive({
    //   name: {
    //     age: 30,
    //   },
    // });

    // const reduce = () => {
    //   // console.log(number);
    //   number.value++;
    //   obj.name.age++;
    // }

    // function reduce (){
    //   number.value++;
    // }
   

   // toRefs 展开的意思
    

    const router = useRouter();

    const data = reactive({
      num:0
    })

    const jump = () => {
       router.push({path:'/about',query:{id:30}});
    }
    // 在组合api中，无论是函数，还是数据想要在标签使用，必须return
    return {
      // number,
      // reduce,
      // obj,
      ...toRefs(data),
      jump
      
    };

    // toRefs 其实就是 循环对象和数组 使其变成 ref 类型的值
  },
};

function add() {
  // 专门处理 按钮点击++

  const number = ref(0);

  const reduce = () => {
    number.value++;
  };

  return {
    number,
    reduce,
  };
}
</script>
